<script setup lang="ts">
import { computed, ref } from "vue";
import PageTabBar from "@/components/PageTabBar.vue";
import AppItem from "./components/AppItem.vue";
import { getAppList } from "@/services/platformService/app";
import { useRequest } from "@/utils/hooks";
import { useUserStore } from "@/store/modules/user";

const userStore = useUserStore();
const keyword = ref("");

// app列表hooks
const { data: appResult, loading } = useRequest(() =>
  getAppList({
    tenantId: userStore.getTenantId,
    page: 1,
    size: 1000,
    classificationId: "",
  })
);

// 搜索过滤
const appList = computed(
  () =>
    appResult.value?.apps?.filter((val) => val.name?.includes(keyword.value)) ??
    []
);
</script>
<template>
  <div class="main section">
    <div class="grouping-list" v-if="!loading">
      <div class="grouping-item">
        <div class="title">我的应用</div>
        <div class="app-list">
          <AppItem v-for="item in appList" :key="item.appId" :item="item" />
          <AppItem v-for="item in appList" :key="item.appId" :item="item" />

          <AppItem v-for="item in appList" :key="item.appId" :item="item" />

          <AppItem v-for="item in appList" :key="item.appId" :item="item" />

          <AppItem v-for="item in appList" :key="item.appId" :item="item" />
          <AppItem v-for="item in appList" :key="item.appId" :item="item" />
          <AppItem v-for="item in appList" :key="item.appId" :item="item" />
          <AppItem v-for="item in appList" :key="item.appId" :item="item" />
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.main {
  padding: var(--padding-value);
  .grouping-list {
    .grouping-item {
      padding: 16px 25px;
      background-color: #fff;
      box-shadow: 0px 4px 8px 0px rgba(220, 239, 255, 0.45);
      border-radius: 8px;
      .title {
        font-weight: 500;
        color: #222222;
        font-size: var(--lg-font-size);
      }
      .app-list {
        display: grid;
        grid-template-columns: repeat(4, 36px);
        justify-content: space-between;
      }
    }
  }
}
</style>
